<template>
  <div id="message">

    <!--    展示通知的页面-->
    <div id="messageTable" v-show=!isShow>
      <div style="padding: 10px 0">
        <el-button class="ml-5" type="primary" @click="newMessage">发布新通知</el-button>
      </div>

      <el-table :data="tableData" border stripe header-cell-class-name="headerBg " style="width: 100% ; height: 50%">
        <div id="messageTable_content">
          <div id="messageTable_content_1">
            <el-col :span="5">
              <el-table-column prop="id" label="通知编号"></el-table-column>
            </el-col>
          </div>
          <el-col :span="5">
            <el-table-column prop="text" label="通知内容" width="300"></el-table-column>
          </el-col>
          <el-col :span="5">
            <el-table-column prop="send_user_name" label="发布人" width="300">adastra 官方团队</el-table-column>
          </el-col>
          <el-col :span="5">
            <el-table-column prop="time" label="通知发布时间" width="300"></el-table-column>
          </el-col>
          <el-col :span="5">
            <el-table-column prop="read" label="已读人数" width="300"></el-table-column>
          </el-col>
        </div>

      </el-table>

    </div>

    <!--发送通知的页面-->
    <div v-show=isShow>
      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="通知名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="发布范围">
          <el-select v-model="form.region" placeholder="请选择发布范围" @click="onSubmit">
            <el-option label="所有用户" value="all"></el-option>
            <el-option label="部分用户" value="bf"></el-option>
          </el-select>
        </el-form-item>

        <!--        弹窗让管理员选择要发消息给哪些用户-->
        <el-dialog
            title="选择用户"
            :visible.sync="form.region==='bf'"
            :before-close="my_close"
            width="35%"
        >
          <div>
            <el-table :data="userData" border stripe header-cell-class-name="headerBg"
                      @selection-change="handleSelectionChange"
                      ref="multipleTable"
            >

              <el-table-column type="selection" label="选择" width="120"></el-table-column>
              <el-table-column prop="id" label="用户id" width="140"></el-table-column>
              <el-table-column prop="username" label="用户名" width="120"></el-table-column>
              <el-table-column prop="state" label="用户状态" width="140"></el-table-column>
            </el-table>

            <div style="padding: 10px ">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes=[5,10]
                  :page-size=pageSize
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=total>
              </el-pagination>
            </div>

          </div>

          <span slot="footer" class="dialog-footer">

    <el-button @click="toggleSelection">取 消</el-button>
    <el-button type="primary" @click="form.region = '部分用户'">确 定</el-button></span>
        </el-dialog>

        <!--        展示哪些用户被选择到-->

        <div id="part" v-if="form.region==='部分用户'">

          <el-card class="part-user" shadow="hover" v-for="i in multipleSelection" style="border-radius: 10px">
            {{ i.username }}
          </el-card>

        </div>


        <el-form-item label="通知内容">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>


</template>

<script>
export default {
  data() {
    return {
      input: '',
      dialogVisible: false,
      pageNum: 0,
      pageSize: 5,
      total: 0,
      isShow: false,
      tableData: [],
      userData: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      multipleSelection: []
    }
  },
  created() {

    //查询所有通知
    this.loadMessage()
  },
  methods: {
    handleSizeChange(pageSize) {//设置每页展示多少条数据
      // console.log("设置每页展示多少条数据" + pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {//设置第几页
      // console.log("设置第几页" + pageNum)
      this.pageNum = pageNum
      this.load()
    },
    //点X的时候关闭弹窗
    my_close() {
      this.form.region = '部分用户'
    },
    //点击发布新通知的按钮点击事件
    newMessage() {
      //请求分页查询数据
      this.load()
      this.isShow = !this.isShow
    },
    //管理员发送消息给用户的点击事件
    onSubmit() {
      let message = {}
      message.isAdmin = true  //告诉后端这条消息是管理员发出的
      this.isShow = !this.isShow
      //1.发送给部分用户
      if (this.form.region === '部分用户') {
        //循环遍历那部分用户数据，将他们分别发送给后端
        for (let i = 0; i < this.multipleSelection.length; i++) {
          message.targetUserId = this.multipleSelection[i].id
          message.text = this.form.desc
          //发送消息给当前用户
          this.request.post("message/send", message).then(res => {
            console.log(res)
          })
        }
      } else {
        //2.发送给所有用户
        message.targetUserId = 1
        message.text = this.form.desc
        this.request.post("message/sendAll", message).then(res => {
          console.log(res)
        })
      }
      // console.log('消息发送成功');
    },
    //发起分页查询的网络请求
    load() {
      this.request.get("admin/selectUser/" + this.pageNum + "/" + this.pageSize + "?username=").then(res => {
        // console.log(res)
        this.userData = res.data.data
        this.total = res.data.total
      })
    },
    //多选框中选中的信息
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    //多选框中取消选择
    toggleSelection(rows) {
      this.form.region = '部分用户'
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //发起请求获取文章页面
    loadMessage() {
      this.request.get("admin/getMessage").then(res => {
        console.log(res)
        this.tableData = res.data
      })
    }
  }
}
</script>

<style scoped>
#message{
  height: 800px;
  overflow: scroll;
}
.part-user {
  display: inline-block;
  text-align: center;
}

#messageTable_content_1 {
  font-size: 50px;
}
</style>

